<template>
  <div class="flex h-full flex-col justify-between">
    <ul class="flex h-full flex-col items-center gap-2">
      <li
        v-for="item in items"
        :key="item.id"
        class="flex rounded-full border p-1 transition-all"
        :class="
          reg(route.path) === item.name
            ? 'border-gray-200 bg-white'
            : 'border-transparent bg-transparent hover:bg-white'
        "
        @click="setActive(item)"
      >
        <a-tooltip
          :title="item.text"
          placement="right"
          :mouse-enter-delay="0.5"
        >
          <svg class="h-8 w-8 fill-neutral-950 focus:outline-none">
            <use
              :href="`/icons/sidebar.svg#${item.icon}${reg(route.path) === item.name ? '-clicked' : ''}`"
            ></use>
          </svg>
        </a-tooltip>
      </li>
    </ul>
    <div class="flex flex-col items-center gap-2">
      <div
        class="flex justify-center rounded-full border border-gray-200 bg-white p-1"
      >
        <a-tooltip
          title="用户：卡拉1号"
          placement="right"
          :mouse-enter-delay="0.5"
        >
          <svg
            width="32"
            height="32"
            viewBox="0 0 64 64"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <mask id="path-1-inside-1_61_6" fill="white">
              <path
                d="M48 50C48 41.4948 40.8365 34.6 32 34.6C23.1635 34.6 16 41.4948 16 50"
              />
            </mask>
            <path
              d="M48 50C48 41.4948 40.8365 34.6 32 34.6C23.1635 34.6 16 41.4948 16 50"
              fill="currentColor"
            />
            <path
              d="M45 50C45 51.6569 46.3431 53 48 53C49.6569 53 51 51.6569 51 50H48H45ZM13 50C13 51.6569 14.3431 53 16 53C17.6569 53 19 51.6569 19 50H16H13ZM48 50H51C51 39.7309 42.3843 31.6 32 31.6V34.6V37.6C39.2888 37.6 45 43.2587 45 50H48ZM32 34.6V31.6C21.6157 31.6 13 39.7309 13 50H16H19C19 43.2587 24.7112 37.6 32 37.6V34.6Z"
              fill="currentColor"
              mask="url(#path-1-inside-1_61_6)"
            />
            <path
              d="M32 29C36.0166 29 39.2727 25.866 39.2727 22C39.2727 18.134 36.0166 15 32 15C27.9834 15 24.7273 18.134 24.7273 22C24.7273 25.866 27.9834 29 32 29Z"
              fill="currentColor"
              stroke="currentColor"
              stroke-width="3"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </a-tooltip>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

let activeId = ref(1)
const items = [
  {
    id: 1,
    text: '首页',
    name: 'home',
    icon: 'home',
    router: () => {
      router.replace('/home')
    },
  },
  {
    id: 2,
    text: '工具箱',
    name: 'toolbox',
    icon: 'toolbox',
    router: () => {
      router.replace('/toolbox')
    },
  },
  {
    id: 3,
    text: '工具市场',
    name: 'store',
    icon: 'store',
    router: () => {
      router.replace('/store')
    },
  },
]

function reg(path: string) {
  const str = path.match(/^\/([^\/]+)/)
  return str?.[1]
}

function setActive(item: any) {
  activeId.value = item.id
  item.router()
}
</script>

<style scoped></style>
